<template>
	<view>
		<view class="forms_cent">
			<uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData" label-position="top">
				<uni-forms-item required name="name" class="textarea_name">
					<view slot="label" class="name_sty">
						<text class="title_rules">*</text> <text class="title_name">新品名称</text> <text
							class="title_pla">最多输入60字符</text>
					</view>
					<uni-easyinput type="textarea" v-model="valiFormData.name" placeholder="请输入..." />
				</uni-forms-item>
				<uni-forms-item required name="desc">
					<view slot="label" class="name_sty">
						<text class="title_name">新品介绍</text> <text class="title_pla">最多输入1200字符</text>
					</view>
					<uni-easyinput type="textarea" v-model="valiFormData.desc" placeholder="请输入..." />
				</uni-forms-item>
				<uni-forms-item label="自我介绍" name="introduction">
					<view slot="label" class="name_sty">
						<text class="title_name">新品图片</text> <text class="title_pla">最多上传6张图片</text>
					</view>

					<view class="file_cent">
						<view v-if="selectedImages.length>0" v-for="(item,index) in selectedImages" :key="index"
							class="item_wrap" :class="{'item_top':index>2}">
							<image :src=" item" alt="" class="item_img" mode="aspectFill" />
							<view class="clear" @click="onDelete(index)">
								<image src="@/static/square/delete.png" mode="widthFix" class="delete_img"></image>
							</view>
						</view>

						<view class="item_wrap1" @click="chooseImage"
							:class="{'item_top': selectedImages.length>=3,'item_wrap2': selectedImages.length==1||selectedImages.length==4||selectedImages.length==7 }">
							<image src="@/static/square/camera.png" mode="widthFix" class="camera"></image>
							<view class="camera_title">
								上传照片/视频
							</view>
						</view>
					</view>
				</uni-forms-item>
			</uni-forms>
		</view>

		<button class="bottom-Gbutton" @click="submit('valiForm')">提交</button>
	</view>
</template>

<script>
	import {
		BASE_URL
	} from "@/api/url.js"
	export default {
		data() {
			return {
				// 校验表单数据
				valiFormData: {
					name: '',
					age: '',
					introduction: '',
				},

				selectedImages: [], //图片

				// 校验规则
				rules: {
					name: {
						rules: [{
								required: true,
								errorMessage: '新品名称不能为空'
							},
							// 对name字段进行长度验证
							{
								maxLength: 60,
								errorMessage: '最多输入60字符',
							}
						]
					},
					desc: {
						rules: [
							// 对name字段进行长度验证
							{
								maxLength: 60,
								errorMessage: '最多输入1200字符',
							}
						]
					}
				},
			};
		},

		methods: {
			chooseImage() {

				if (this.selectedImages.length >= 6) {
					uni.showToast({
						title: '最大可上传6张图片',
						icon: 'none',
						duration: 1500
					});
					return false
				}
				uni.chooseImage({
					count: 1, // 默认为9  
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有  
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有  
					success: (res) => {
						this.onloading = true
						const tempFilePaths = res.tempFilePaths;
						let file = res.tempFiles[0]

						uni.uploadFile({
							url: BASE_URL +
								'/jeecg-store/store/upload/file/upload',
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								'x-access-token:': uni.getStorageSync('token') || ''
							},
							header: {
								'x-access-token': uni.getStorageSync('token') || ''
							},
							success: (uploadFileRes) => {
								this.onloading = false
								let data = JSON.parse(uploadFileRes.data)
								this.selectedImages = [...this.selectedImages];
								if (data.result) {
									this.selectedImages.push(data.result)
								} else {
									uni.showToast({
										title: '上传失败',
										icon: 'none',
										duration: 2000
									});
								}
								console.log(this.selectedImages, 'this.selectedImages');
							}
						});

					},
					fail: (err) => {
						console.log(err);
						this.onloading = false
					},
					complete: (err) => {
						this.onloading = false
					},
				});
			},

			onDelete(index) {
				this.selectedImages.splice(index, 1)
				if (this.typesFo && this.selectedImages.length == 0) {
					this.typesFo = null
				}
			},

			submit(ref) {
				this.$refs[ref].validate().then(res => {
					console.log('success', res);
					uni.showToast({
						title: `校验通过`
					})
				}).catch(err => {
					console.log('err', err);
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.forms_cent {
		padding: 15px;
		background-color: #fff;

		.title_rules {
			color: #FE2C55;
		}

		.title_name {
			margin-left: 12rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
			line-height: 44rpx;
			text-align: left;
		}

		.title_pla {
			margin-left: 10rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: rgba(51, 51, 51, 0.6);
			line-height: 40rpx;
			text-align: left;
		}

		::v-deep .textarea_name .uni-easyinput__content-textarea {
			line-height: 1.5;
			font-size: 28rpx;
			height: 90rpx;
			min-height: 60rpx;
			/* #ifndef APP-NVUE */
			min-height: 60rpx;
			width: auto;
			/* #endif */
		}

		// 图片
		.file_cent {
			display: flex;
			flex-wrap: wrap;

			.item_wrap {
				width: 220rpx;
				height: 220rpx;
				border-radius: 12rpx;
				position: relative;
				margin-bottom: 15rpx;
				margin-right: 12rpx;

				.item_img {
					height: 100%;
					width: 100%;
					border-radius: 12rpx;
				}

				.clear {
					position: absolute;
					top: 0rpx;
					right: 0rpx;
					height: 52rpx;
					width: 52rpx;
					display: flex;
					text-align: center;
					justify-content: center;

					.delete_img {
						height: 37rpx;
						width: 37rpx;
					}

				}
			}

			.item_wrap:nth-child(3n) {
				margin-right: 0;
			}

			.item_wrap1 {
				width: 220rpx;
				height: 220rpx;
				border-radius: 12rpx;
				background-color: #F7F7F7;
				text-align: center;
				border: 2rpx solid #D9D9D9;

				.camera {
					margin-top: 50rpx;
					width: 60rpx;
					height: 60rpx;
				}

				.camera_title {
					margin-top: 24rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: rgba(51, 51, 51, 0.8);
					line-height: 24rpx;
				}
			}
		}



	}

	.bottom-Gbutton {
		width: 686rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		margin: 18rpx 32rpx;
		background: linear-gradient(90deg, #FF4D6F 0%, #FE2C55 100%);
		height: 98rpx;
		line-height: 98rpx;
		background-color: #434345;
		color: #fff;
		border-radius: 36rpx 36rpx 36rpx 36rpx;
	}
</style>